import { Button } from "antd";
import React from "react";
import { connect } from "umi";

const FancyButton = React.forwardRef((props, ref) => (
	<Button ref={ref} className="FancyButton" {...props}>
		{props.children}
	</Button>
));

class Test extends React.Component {
	constructor(props) {
		super(props);
		this.ref = React.createRef();
	}
	onClick = () => {
		this.props.dispatch({
			type: "docs/setList",
			payload: { data: [] },
		});
	};
	render() {
		return (
			// 你可以直接获取 DOM button 的 ref：
			<>
				<FancyButton ref={this.ref} onClick={this.onClick}>
					Click me!
				</FancyButton>
				<div>
					{this.props.list.map(i => (
						<div key={i.id}>{i.title}</div>
					))}
				</div>
			</>
		);
	}
}

export default connect(store => {
	return { list: store.docs.list };
})(Test);
